<template>
	<view class="consumption-style">
		<uni-forms label-position="top" label-width="150">
			<view class="create-order">
				<view class="create-order-before"></view>
				<view class="create-order-text">创建订单</view>
			</view>
			</uni-forms-item>
			<uni-forms-item label="选择油枪" name="name">
				<view class="oil-gun">
					<view class="oil-gun-bord">
						<view>1</view>
						<view class="oil-gun-text">/95#汽油</view>
					</view>
					<view class="oil-gun-bord">
						<view>2</view>
						<view class="oil-gun-text">/0#汽油</view>
					</view>
					<view class="oil-gun-bord">
						<view>3</view>
						<view class="oil-gun-text">/95#汽油</view>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item label="应付金额(元)" name="name">
				<uni-easyinput type="number" placeholder="请输入" />
			</uni-forms-item>
			<view class="create-order">
				<view class="create-order-before"></view>
				<view class="create-order-text">付款</view>
			</view>
			<uni-forms-item label="支付方式" name="name">
				<uni-data-select v-model="value" :localdata="range"	@change="change">
				</uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="余额(元)" name="name">
				<view>---</view>
			</uni-forms-item>
			<uni-forms-item label="电子卡余额(元)" name="name">
				<view>---</view>
			</uni-forms-item>
			<view class="item-switch">
				<view class="item-switch-text">参与立减活动</view>
				<switch checked color="#FFCC33" style="transform:scale(0.8)"/>
			</view>
			<view class="item-switch-select">
				<view class="item-switch">
					<view class="item-switch-text">使用优惠劵</view>
					<switch checked color="#FFCC33" style="transform:scale(0.8)"/>
				</view>
				<uni-data-select v-model="value" :localdata="range"	@change="change">
				</uni-data-select>
			</view>
			<uni-forms-item label="实付金额(元)" name="name">
				<view>---</view>
			</uni-forms-item>
			<uni-forms-item>
				<view class="button-text">
					<button class="button-style">取消</button>
					<button class="button-style button-back" @click='paymentPopup'>生成订单</button>
				</view>
			</uni-forms-item>
		</uni-forms>
		<!-- 使用 -->
		<u-popup v-model="show">
				<view>出淤泥而不染，濯清涟而不妖</view>
			</u-popup>
	
	</view>
	
</template>

<script>
     
	export default {
		data() {
			return {
			    value: "",
			    range: [
					{ value: 0, text: "篮球" },
				    { value: 1, text: "足球" },
				    { value: 2, text: "游泳" },
				],
				show:false,
				 pwdLen: 6, //输入密码的长度
				  numberLen: 9, //密码键盘的数字
				  password: '', //密码
				 count: 6
			}
		},
		
		methods: {
			change(e) {
				console.log("e:", e);
		    },
			paymentPopup(){
				console.log(1111,this.show)
this.show=true
				console.log(222,this.show)
			},
			   inputNumFun (op) {
			            if (this.password.length <= 6) {
			                this.password += op.num;
			                if (this.password.length !== this.pwdLen) return;
			                this.handleSubmit();
			            }
			        },
			        delNumFun () {
			            if (this.password.length == 0) return;
			            this.password = this.password.substring(
			                0,
			                this.password.length - 1
			            );
			        },
			        forgetFun () {
			            uni.showToast({
			                title: '忘记密码操作',
			                icon: 'none',
			            });
			        },
			        hideFun () {
			            this.$emit('update:show', false);
			        },
			        async handleSubmit () {
			            this.$emit('getPassword', { password: this.password });
			        }
		
		}
	}
</script>

<style lang="scss">
	.consumption-style{
		padding: 0px 30px;
	}
	.create-order{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 20px 0px;
	}
	.create-order-text{
		font-size: 16px;
	}
	.create-order-before{
		width: 4px;
		height: 20px;
		background-color: #ffaa00;
		margin-right: 5px;
	}
	.oil-gun{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.oil-gun-bord{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 80px;
		height: 30px;
		border: 1px solid #848484;
		border-radius: 3px;
	}
	.oil-gun-text{
		margin-left: 3px;
		font-size: 12px;
	}
	.item-switch{
		display: flex;
		flex-direction: row;
		margin-bottom: 10px;
	}
	.item-switch-text{
		font-size: 14px;
		width: 120px;
		color: #848484;
	}
	.item-switch-select{
		margin-bottom: 10px;
	}
	.button-text{
		margin: 0px auto 20px auto;
		display: flex;
		flex-direction: row;
		width: 100%;
	}
	.button-style{
		width: 100%;
		border: 1px solid #848484;
		border-radius: 0px;
		color: #848484;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
	.button-back{
		border: 1px solid #ffaa00;
		background-color: #ffaa00;
		color: #fff;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
	}
	.key_main {
	    .main_title {
	        height: 120rpx;
	        display: flex;
	        align-items: center;
	        justify-content: space-between;
	        padding: 0px 40rpx;
	        .title_icon, .title_forget {
	            width: 120rpx;
	        }
	        text {
	            text-align: center;
	        }
	        .title_forget {
	            color: #000;
	            font-size: 14px;
	        }
	    }
	    .main_content {
	        padding: 20rpx 100rpx;
	        .content_num {
	            display: flex;
	            align-items: center;
	            justify-content: space-between;
	            .content_item {
	                width: 80rpx;
	                height: 80rpx;
	                background-color: #ccc;
	                border-radius: 16rpx;
	                display: flex;
	                justify-content: center;
	                align-items: center;
	            }
	        }
	        .error_text {
	            font-size: 24rpx;
	            color: $u-error;
	            text-align: center;
	            margin-top: 20rpx;
	        }
	    }
	    .main_keyboard {
	        height: 500rpx;
	        display: flex;
	        flex-flow: wrap;
	        .key_null,
	        .key_del {
	            background: #ededed;
	        }
	        image {
	            width: 40rpx;
	            height: 30rpx;
	        }
	        .key_num,
	        .key_null,
	        .key_del,
	        .key_0 {
	            width: 250rpx;
	            height: 125rpx;
	            display: flex;
	            align-items: center;
	            justify-content: center;
	        }
	        .key_num {
	            border-right: 2rpx solid #f1f4f4;
	            border-bottom: 2rpx solid #f1f4f4;
	            border-top: 2rpx solid #f1f4f4;
	            &:nth-child(n + 4) {
	                border-top: none;
	            }
	            &:nth-child(n + 7) {
	                border-bottom: none;
	            }
	        }
	        .key_0 {
	            border-top: 2rpx solid #f1f4f4;
	        }
	    }
	}

</style>
